import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import TrafficCapacityChartMeta from '../traffic-capacity-chart/meta';

const TrafficCapacityPanelMeta: IPublicTypeComponentMetadata = {
  componentName: 'TrafficCapacityPanel',
  title: '各类交通方式小时运力图',
  category: '信息展示',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TrafficCapacityPanel',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
   {
      name: 'statusBar',
      propType: 'object',
      description: '状态栏配置'
    },
    {
      name: 'trafficChart',
      propType: 'object',
      description: '图表配置',
     ...TrafficCapacityChartMeta.props?.find(p => p.name === 'props')
    }
  ],
  configure: {
    props: [
      // 基础属性
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '组件宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 462,
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度'
            },
            setter: 'NumberSetter',
           
          },
          {
            name: 'theme',
            title: {
              label: '主题',
              tip: '图表主题样式'
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '深色', value: 'dark' },
                  { title: '浅色', value: 'light' }
                ]
              }
            }
          },
          {
            name: 'noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ]
      },
      // 状态栏配置
      {
        name: 'statusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '状态栏配置',
        },
        items: [
          {
            name: 'statusBar.title',
            title: {
              label: '中文标题',
              tip: '状态栏显示的中文标题'
            },
            setter: 'StringSetter',
            defaultValue: '各类交通方式小时运力图',
          },
          {
            name: 'statusBar.subtitle',
            title: {
              label: '英文标题',
              tip: '状态栏显示的英文标题'
            },
            setter: 'StringSetter',
            defaultValue: 'ENFORCEMENT',
          }
        ]
      },
       // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'trafficChart.series',
            title: {
              label: '数据系列',
              tip: '各交通方式的运力数据'
            },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'name',
                          title: '名称',
                          setter: 'StringSetter'
                        },
                        {
                          name: 'color',
                          title: '颜色',
                          setter: 'ColorSetter'
                        },
                        {
                          name: 'data',
                          title: '数据',
                          setter: {
                            componentName: 'ArraySetter',
                            props: {
                              itemSetter: {
                                componentName: 'ObjectSetter',
                                props: {
                                  config: {
                                    items: [
                                      {
                                        name: 'time',
                                        title: '时间',
                                        setter: 'StringSetter'
                                      },
                                      {
                                        name: 'value',
                                        title: '数值',
                                        setter: 'NumberSetter'
                                      }
                                    ]
                                  }
                                }
                              }
                            }
                          }
                        },
                        {
                          name: 'lineWidth',
                          title: '线宽',
                          setter: 'NumberSetter'
                        },
                        {
                          name: 'showDots',
                          title: '显示点',
                          setter: 'BoolSetter'
                        }
                      ]
                    }
                  }
                }
              }
            }
          }
        ]
      },
        // 显示配置
      {
        name: 'display',
        type: 'group',
        display: 'accordion',
        title: {
          label: '显示配置',
        },
        items: [
          {
            name: 'trafficChart.showGrid',
            title: {
              label: '显示网格',
              tip: '是否显示网格线'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'trafficChart.showLegend',
            title: {
              label: '显示图例',
              tip: '是否显示图例'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'trafficChart.legendPosition',
            title: {
              label: '图例位置',
              tip: '图例显示位置'
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '顶部', value: 'top' },
                  { title: '底部', value: 'bottom' },
                  { title: '左侧', value: 'left' },
                  { title: '右侧', value: 'right' }
                ]
              }
            }
          }
        ]
      },
       // 坐标轴配置
      {
        name: 'axis',
        type: 'group',
        display: 'accordion',
        title: {
          label: '坐标轴配置',
        },
        items: [
          {
            name: 'trafficChart.xAxisLabel',
            title: {
              label: 'X轴标题',
              tip: 'X轴标题文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'trafficChart.yAxisLabel',
            title: {
              label: 'Y轴标题',
              tip: 'Y轴标题文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'trafficChart.minY',
            title: {
              label: 'Y轴最小值',
              tip: 'Y轴最小值'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'trafficChart.maxY',
            title: {
              label: 'Y轴最大值',
              tip: 'Y轴最大值'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'trafficChart.stepY',
            title: {
              label: 'Y轴步长',
              tip: 'Y轴刻度步长'
            },
            setter: 'NumberSetter'
          }
        ]
      },
        // 颜色配置
      {
        name: 'colors',
        type: 'group',
        display: 'accordion',
        title: {
          label: '颜色配置',
        },
        items: [
          {
            name: 'trafficChart.backgroundColor',
            title: {
              label: '背景颜色',
              tip: '图表背景颜色'
            },
            setter: 'ColorSetter'
          },
          {
            name: 'trafficChart.gridColor',
            title: {
              label: '网格颜色',
              tip: '网格线颜色'
            },
            setter: 'ColorSetter'
          },
          {
            name: 'trafficChart.textColor',
            title: {
              label: '文字颜色',
              tip: '文字颜色'
            },
            setter: 'ColorSetter'
          }
        ]
      },
       
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {
      isContainer: false,
      isModal: false,
    },
  },
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1UyR3MKMFvk_!!6000000002580-55-tps-200-200.svg',
  keywords: ['交通运力', 'traffic', 'capacity', 'chart', 'panel', 'transport'],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '各类交通方式小时运力图',
    screenshot: '',
    schema: {
      componentName: 'TrafficCapacityPanel',
      props: {
        width: 500,
        height: 388,
        noResponsiveScale: true,
        statusBar: {
          title: '各类交通方式小时运力图',
          subtitle: 'ENFORCEMENT'
        },
        trafficChart: {
          backgroundColor: 'transparent',
          gridColor: 'rgba(255, 255, 255, 0.15)',
          textColor: 'rgba(255, 255, 255, 0.9)',
          showGrid: true,
          showLegend: true,
          legendPosition: 'top',
          theme: 'dark',
          minY: 0,
          maxY: 700000,
          stepY: 100000,
          series: [
            {
              name: '铁路',
              color: '#FF6B6B',
              data: [
                { time: '6.4', value: 120000 },
                { time: '6.5', value: 130000 },
                { time: '6.6', value: 140000 },
                { time: '6.7', value: 150000 },
                { time: '6.8', value: 160000 },
                { time: '6.9', value: 180000 },
                { time: '6.10', value: 240000 },
                { time: '6.11', value: 230000 }
              ]
            },
            {
              name: '地铁',
              color: '#4ECDC4',
              data: [
                { time: '6.4', value: 20000 },
                { time: '6.5', value: 30000 },
                { time: '6.6', value: 40000 },
                { time: '6.7', value: 50000 },
                { time: '6.8', value: 60000 },
                { time: '6.9', value: 70000 },
                { time: '6.10', value: 100000 },
                { time: '6.11', value: 90000 }
              ]
            }
          ]
        }
      }
    }
  }
];

export default {
  ...TrafficCapacityPanelMeta,
  snippets
};